<script setup lang="ts">
  import { ref } from 'vue'

  const tabMetas = [
    { title: '密码登录', subTitle: '验证码登录' },
    { title: '验证码登录', subTitle: '密码登录' },
  ]
  const current = ref(0)
</script>

<template>
  <view class="use-login">
    <view class="use-type">
      <view class="title">
        <view class="type">
          <view class="password">{{ tabMetas[current].title }}</view>
          <view>
            <text class="message" @click="current = current === 0 ? 1 : 0">{{
              tabMetas[current].subTitle
            }}</text>
            <uni-icons type="right"></uni-icons>
          </view>
        </view>
      </view>
    </view>
      <view style=" margin-top: 80rpx;">  
     <custom-password v-if="current===0"</custom-password>
     <custom-mobile v-else></custom-mobile>
    </view>
  <view class="social-login">
    <view class="legend">
      <text class="text">三方登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons type="weixin" color="#07c160" size="30" />
      </view>
      <view class="icon">
        <uni-icons type="qq" color="#00b0fb" size="30" />
      </view>
      <view class="icon">
        <uni-icons type="weibo" color="#fb6622" size="30" />
      </view>
    </view>
  </view>
  </view>

</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
